<template>
	<view class="com__box">
		<!-- loading -->
		<view class="loading">
			<view></view>
			<view></view>
			<view></view>
			<view></view>
			<view></view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.loading,
	.loading>view {
		position: relative;
		box-sizing: border-box;
	}

	.loading {
		display: block;
		font-size: 0;
		color: #000;
	}

	.loading.la-dark {
		color: #333;
	}

	.loading>view {
		display: inline-block;
		float: none;
		background-color: currentColor;
		border: 0 solid currentColor;
	}

	.loading {
		width: 40px;
		height: 32px;
	}

	.loading>view {
		width: 4px;
		height: 32px;
		margin: 2px;
		margin-top: 0;
		margin-bottom: 0;
		border-radius: 0;
		animation: line-scale-pulse-out 0.9s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
	}

	.loading>view:nth-child(3) {
		animation-delay: -0.9s;
	}

	.loading>view:nth-child(2),
	.loading>view:nth-child(4) {
		animation-delay: -0.7s;
	}

	.loading>view:nth-child(1),
	.loading>view:nth-child(5) {
		animation-delay: -0.5s;
	}

	.loading.la-sm {
		width: 20px;
		height: 16px;
	}

	.loading.la-sm>view {
		width: 2px;
		height: 16px;
		margin: 1px;
		margin-top: 0;
		margin-bottom: 0;
	}

	.loading.la-2x {
		width: 80px;
		height: 64px;
	}

	.loading.la-2x>view {
		width: 8px;
		height: 64px;
		margin: 4px;
		margin-top: 0;
		margin-bottom: 0;
	}

	.loading.la-3x {
		width: 120px;
		height: 96px;
	}

	.loading.la-3x>view {
		width: 12px;
		height: 96px;
		margin: 6px;
		margin-top: 0;
		margin-bottom: 0;
	}

	@keyframes line-scale-pulse-out {
		0% {
			transform: scaley(1);
		}

		50% {
			transform: scaley(0.3);
		}

		100% {
			transform: scaley(1);
		}
	}
</style>
